import React, { useState, useEffect, Fragment } from "react";
import { Table, Button, Tag } from "antd";
import MenuCss from "../index.module.css";
import ConfirmModal from "../../../components/ConfirmModal";
import { treeData } from "../../../utils";
/* 表格多选事件 */
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, "selectedRows: ", selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log("----", record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log("++++++++++", selected, selectedRows, changeRows);
  },
};

function Component(props) {
  const { changeModalState, tableData, total, setIsUpdate } = props;
  const columns = [
    {
      title: "资源类型",
      dataIndex: "type",
      align: "center",
      render: data =>
        data === "catalog" ? (
          <Tag color="blue">目录</Tag>
        ) : data === "menu" ? (
          <Tag color="orange">菜单</Tag>
        ) : data === "button" ? (
          <Tag color="green">按钮</Tag>
        ) : (
          "未知类型"
        ),
    },
    {
      title: "资源文字",
      dataIndex: "title",
      align: "center",
    },
    {
      title: "上级资源",
      dataIndex: "parentTitle",
      align: "center",
    },
    {
      title: "资源路径",
      dataIndex: "key",
      align: "center",
    },
    {
      title: "资源名称",
      dataIndex: "componentName",
      align: "center",
    },
    {
      title: "资源图标",
      dataIndex: "icon",
      align: "center",
    },
    {
      title: "操作",
      key: "operation",
      fixed: "right",
      align: "center",
      width: 160,
      render: data => (
        <Fragment>
          <Button type="link" onClick={updateData(data)}>
            修改
          </Button>
          <Button type="link" onClick={() => removeData(data)}>
            删除
          </Button>
        </Fragment>
      ),
    },
  ];
  /* 处理表格数据 */
  const [tableDataList, setTableDataList] = useState(null);
  useEffect(() => {
    const newArr = [];
    for (const item of tableData) {
      item.parentTitle = item.parentId && item.parentId.title;
      item.parentId = item.parentId && item.parentId._id;
      newArr.push(item);
    }
    // const tableTreeData = treeData(newArr, "6141caf01653fe1a041e38d0");
    setTableDataList(newArr);
  }, [tableData]);

  /* 分页符 */
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const paginationAction = {
    onChange: (page, pageSize) => {
      console.log("object======", page, pageSize);
      setPageSize(pageSize);
      setIsUpdate(new Date().getTime());
    },
    onShowSizeChange: (current, size) => {
      console.log("object----------", current, size);
      setPageSize(size);
      setCurrentPage(current);
      setIsUpdate(new Date().getTime());
    },
  };
  /* 修改数据 */
  const updateData = data => {
    return () => {
      changeModalState(data);
    };
  };
  /* 删除数据 */
  const [visible, setVisible] = useState(false);
  const [actionData, setActionData] = useState(null);
  const removeData = data => {
    setVisible(true);
    data.url = `/resource/remove/${data._id}`;
    setActionData(data);
  };
  return (
    <Fragment>
      <Table
        size="middle"
        rowKey="_id"
        scroll={{ y: "100%" }}
        rowSelection={{ ...rowSelection }}
        className={MenuCss.menu_table}
        columns={columns}
        dataSource={tableDataList}
        pagination={{
          total,
          pageSize,
          current: currentPage,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: [10, 20, 50, 100],
          showTotal: total => `总共 ${total} 条数据`,
          ...paginationAction,
        }}
      />
      <ConfirmModal
        visible={visible}
        actionData={actionData}
        setVisible={setVisible}
        setIsUpdate={setIsUpdate}
        infoFields="title"
      ></ConfirmModal>
    </Fragment>
  );
}

const TableList = React.memo(Component);

export default TableList;
